<template>
  <div>
    <div>
      <el-card>
        <el-row type="flex" justify="space-between">
          <el-button type="primary" size="small" @click="addFn">添加房产</el-button>
          <div>
            <!-- 全部分类 -->
            <el-select v-model="selectValue" size="small" style="width:100px" placeholder="全部分类" @change="selectChange">
              <el-option label="全部分类" value="" />
              <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              />
            </el-select>
            <!-- 全部经纪 -->
            <el-select v-model="agentsValue" size="small" style="width:100px" placeholder="全部经纪" @change="agentsChange">
              <el-option label="全部经纪" value="" />
              <el-option
                v-for="item in agentList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            <!-- 输入搜索框 -->
            <el-input v-model="title_contains" style="width:400px" size="small" placeholder="请输入关键字" @input="blurFn(resetFn,1000)" />
            <!-- 筛选按钮 -->
            <el-button size="small" @click="resetFn">筛选</el-button>
          </div>
        </el-row>
        <!-- 分割线 -->
        <el-divider />
        <!-- form 表单 -->
        <el-table
          :data="tableData"
          border
          style="width: 100%;margin-top:20px"
        >
          <el-table-column
            prop="image"
            label="封面"
            width="160"
            align="center"
          >
            <template v-slot="{row}">
              <img v-errImg="require('@/assets/common/defaultImg.png')" :src="row.image" width="100%">
            </template>
          </el-table-column>
          <el-table-column
            prop="title"
            label="标题"
            align="center"
          />
          <el-table-column
            prop="tags"
            label="标签"
            align="center"
          />
          <el-table-column
            prop="address"
            label="地址"
            align="center"
          />
          <el-table-column
            prop="category.title"
            label="分类"
            align="center"
          />
          <el-table-column
            prop="agent.name"
            label="经纪"
            align="center"
          />
          <el-table-column
            prop="price"
            label="价格"
            align="center"
          />
          <el-table-column
            prop="desc"
            label="介绍"
            align="center"
          />
          <el-table-column
            prop="photos"
            width="160"
            label="图片"
            align="center"
          >
            <template v-slot="{row}">
              <img v-errImg="require('@/assets/common/defaultImg.png')" :src="row.photos" width="100%">
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="200px"
            align="center"
          >
            <template v-slot="{row}">
              <el-button type="primary" size="small" @click="editFn(row.id)">编辑</el-button>
              <el-button type="danger" size="small" @click="delFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分割线 -->
        <el-divider />
        <!-- 分页器 -->
        <el-row type="flex" justify="center" style="margin-top:20px">
          <el-pagination
            layout="prev, pager, next"
            :page-size="pageSize._limit"
            :total="total"
            :current-page.sync="currentPage"
            @current-change="currentChange"
          />
          <!-- ：current-page分页的参数属性 -->
          <!-- @current-change切换页码的事件 -->
          <span class="amount">总数 {{ total }}</span>
        </el-row>
      </el-card>
      <!-- 添加弹窗组件 -->
      <addHouse
        ref="addHouse"
        :show-dialog.sync="showDialog"
        @closeEvent="closeEvent"
        @addEvent="addEvent"
      />
    </div>
  </div>
</template>

<script>
import addHouse from './components/addHouse.vue'
// 获取房产数据
import { getHouseList, getCateGoriesList, getAgentsList, getCateGoriesCount, delHouseList } from '@/api/house'
export default {
  components: { addHouse },
  data() {
    return {
      page: 1, // 默认为第1页
      timer: null,
      pageSize: {
        _limit: 2,
        _start: 0
      }, // 传给后端的数据 请求的页数以及页码
      currentPage: 1, // 分页筛选切换的参数
      showDialog: false, // 弹窗默认不显示
      total: 0, // 总数
      tableData: [], // 表单列表
      title_contains: '', // 搜素变量，
      categoryList: [], // 分类列表
      agentList: [], // 经纪人列表，
      selectValue: '', // 分类绑定的Model
      agentsValue: '' // 经纪绑定的Model

    }
  },
  async created() {
    // 获取form表单列表
    this.getHouse()
    //  获取分类列表
    const res = await getCateGoriesList()
    // console.log('177', res)
    this.categoryList = res

    // 获取经纪列表
    const agent = await getAgentsList()
    // console.log('157', agent)
    this.agentList = agent

    // 进入页面 获取总数
    this.getCateGoriesNamber()
  },
  methods: {
    // 搜索框
    async blurFn(fn, delay) {
      await clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        fn()
      }, delay)
    },
    // 重置筛选查询
    resetFn() {
      this.currentPage = 1
      this.pageSize._start = 0
      // console.log('178')
      this.getHouse()
      this.getCateGoriesNamber()
    },
    // 编辑回显按钮
    editFn(id) {
      // console.log('172', id)
      // 显示弹窗
      this.showDialog = true
      this.$refs.addHouse.getHouseListById(id)
    },
    // 删除房产按钮
    delFn(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 点击确认删除数据
        await delHouseList(id)
        if (this.tableData.length === 1 && this.pageSize._start !== 1) {
          this._start--
          this.pageSize._start = (this.page - 1) * this.pageSize._limit
        }
        // 刷新页面
        this.getHouse()
        // 获取总数
        this.getCateGoriesNamber()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 组件传递绑定的新增事件
    addEvent() {
      // 刷新列表
      this.getHouse()
      // 获取总数量
      this.getCateGoriesNamber()
    },
    // 全部分类筛选
    async selectChange(val) {
      // console.log('167', val)
      this.categoryList.title = val
      this.getHouse()
    },
    // 全部经纪筛选
    async agentsChange(val) {
      // console.log('172', val)
      this.agentList.name = val
      this.getHouse()
    },
    // 分页处理
    currentChange(page) {
      // console.log('163', page)
      this.val = page
      this.pageSize._start = (page - 1) * this.pageSize._limit
      this.getHouse()
    },
    // 获取总的房产数量
    async getCateGoriesNamber() {
      const res = await getCateGoriesCount({
        title_contains: this.title_contains || null,
        agent: this.agentList.name || null,
        category: this.categoryList.title || null
      })
      // console.log('193', res)
      this.total = res
    },
    //  获取页面房产数据列表
    async getHouse() {
      const res = await getHouseList({
        ...this.pageSize,
        title_contains: this.title_contains || null,
        agent: this.agentList.name || null,
        category: this.categoryList.title || null
      })
      // console.log('172', res)
      this.tableData = res
    },
    // 添加按钮房产
    addFn() {
      this.showDialog = true
    },
    // 取消按钮
    closeEvent() {
      this.showDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
/* .amount{
  color: green;
  margin-top: 7px;
  font-size: 14px;
} */
.amount{
  line-height: 32px;
}
 .el-card{
    margin: 20px;
 }
</style>
